import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Modal, Button, Form, Input, Radio, DatePicker, Select } from 'antd';
import { message } from 'antd/lib/index';
import moment from 'moment';
import * as options from '../../../../common/selectOption';

const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;

/* eslint react/no-multi-comp:0 */
@connect(({ ProjectManage, loading }) => ({
  ProjectManage,
}))

@Form.create()
class ProjectAfter extends PureComponent {
  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  render() {
    const { modalVisible, handleOk, handleCancel } = this.props;
    const handleSubmit = (e) => {
      e.preventDefault();
      const { dispatch, form, selectedRows } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        fieldsValue.endTime = fieldsValue.endTime ? moment(fieldsValue.endTime).format('YYYY-MM-DD') : '';
        fieldsValue.startTime = fieldsValue.startTime ? moment(fieldsValue.startTime).format('YYYY-MM-DD') : '';
        let obj = {
          ...fieldsValue,
          projectNo: selectedRows.projectNo,
        };
        dispatch({
          type: 'ProjectManage/after',
          payload: obj,
          callback(res) {
            console.log(res);
            if (res.code === 200) {
              message.success('操作成功');
              handleCancel(false, []);
            } else {
              message.error(res.errMsg);
            }
          },
        });
      });
    };
    const contentRender = () => {
      const { form, ProjectManage: { AfterDetails } } = this.props;
      const values = AfterDetails;
      return (
        <Form>
          <FormItem key="amountStatus" {...this.formLayout} label="资金运营情况">
            {form.getFieldDecorator('amountStatus', {
              rules: [{ required: true, message: '请选择资金运营情况!' }],
              initialValue: values.amountStatus,
            })(<Select placeholder="请选择资金运营情况">
              {options.abnormal.map((item) => (
                <Select.Option key={item.key} value={item.value}>{item.value}</Select.Option>
              ))}
            </Select>)}
          </FormItem>

          <FormItem key="enterpriseCondition" {...this.formLayout} label="经营状况">
            {form.getFieldDecorator('enterpriseCondition', {
              rules: [{ required: true, message: '请选择经营状况！' }],
              initialValue: values.enterpriseCondition,
            })(<Select placeholder="请选择经营状况">
              {options.up_down.map((item) => (
                <Select.Option key={item.key} value={item.value}>{item.value}</Select.Option>
              ))}
            </Select>)}
          </FormItem>
          <FormItem key="repayAbility" {...this.formLayout} label="还款能力">
            {form.getFieldDecorator('repayAbility', {
              rules: [{ required: true, message: '请输入选择能力！' }],
              initialValue: values.repayAbility,
            })(<Select placeholder="请输入选择能力">
              {options.up_down.map((item) => (
                <Select.Option key={item.key} value={item.value}>{item.value}</Select.Option>
              ))}
            </Select>)}
          </FormItem>
          <FormItem key="litigation" {...this.formLayout} label="涉诉情况">
            {form.getFieldDecorator('litigation', {
              rules: [{ required: true, message: '请选择涉诉情况！' }],
              initialValue: values.litigation,
            })(
              <Select placeholder="请选择涉诉情况">
                {options.litigation.map((item) => (
                  <Select.Option key={item.key} value={item.value}>{item.value}</Select.Option>
                ))}
              </Select>,
            )}
          </FormItem>
          <FormItem key="punish" {...this.formLayout} label="处罚情况">
            {form.getFieldDecorator('punish', {
              rules: [{ required: true, message: '请选择处罚情况！' }],
              initialValue: values.punish,
            })(<Select placeholder="请选择处罚情况">
              {options.punish.map((item) => (
                <Select.Option key={item.key} value={item.value}>{item.value}</Select.Option>
              ))}
            </Select>)}
          </FormItem>
          <FormItem key="overdueStatus" {...this.formLayout} label="逾期情况">
            {form.getFieldDecorator('overdueStatus', {
              rules: [{ required: true, message: '请选择逾期情况！' }],
              initialValue: values.overdueStatus,
            })(
              <Select placeholder="请选择逾期情况">
                {options.overdueStatus.map((item) => (
                  <Select.Option key={item.key} value={item.value}>{item.value}</Select.Option>
                ))}
              </Select>,
            )}
          </FormItem>
          <FormItem key="startTime" {...this.formLayout} label="披露开始时间">
            {form.getFieldDecorator('startTime', {
              rules: [{ required: true, message: '请选择披露开始时间！' }],
              initialValue: moment(values.startTime ? values.startTime : new Date()),
            })(<DatePicker
              placeholder="请选择披露开始时间"
              style={{ width: '100%' }}/>)}
          </FormItem>
          <FormItem key="endTime" {...this.formLayout} label="披露结束时间">
            {form.getFieldDecorator('endTime', {
              rules: [{ required: true, message: '请选择披露结束时间！' }],
              initialValue: moment(values.endTime ? values.endTime : moment(new Date()).add(1, 'day')),
            })(<DatePicker
              placeholder="请选择披露结束时间"
              disabledDate={currentDate => !!currentDate && (form.getFieldValue('startTime')+33 > currentDate.valueOf())}
              style={{ width: '100%' }}/>)}
          </FormItem>
        </Form>
      );
    };
    return (
      <Modal
        title="投后编辑"
        width={800}
        visible={modalVisible}
        onOk={handleSubmit}
        onCancel={() => handleCancel(false, [])}
      >
        {contentRender()}
      </Modal>
    );
  }
}

export default ProjectAfter;
